<template>
    <div class="main">
        <div class="search">
            <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
        </div>
        <list :list="list" @touchend="getList" :loading="loading" nodataText="没有搜索到相关内容，根据您的搜索我们会及时更新您所需要的相关内容"></list>
    </div>
</template>
<style lang="less" scoped>
.main {
    .search {
        /deep/.van-search {
            background: #000;
            .van-search__content {
                background: @bgcolor;
                color: #fff;
                border-radius: 80 / 2px;
                .van-cell {
                    flex-direction: row-reverse;
                    .van-field__left-icon {
                        color: #fff;
                    }
                    .van-field__control {
                        color: #fff;
                    }
                }
            }
            .van-search__action {
                color: #fff;
            }
            .van-icon-clear {
                display: none;
            }
        }
    }
}
</style>
<script>
import list from '@/components/list/list'
export default {
    components: {
        list
    },
    data () {
        return {
            list: [],
            value: '',
            page: 1,
            loading: false
        }
    },
    mounted () {
        this.courseSearch()
    },
    watch: {
        value (val) {
            if(val){
                this.onSearch()
            }
        }
    },
    methods: {
        getList () {
            this.page = this.page + 1
            this.courseSearch()
        },
        courseSearch () {
            this.loading = true
            this.$model.comm.courseSearch({ title: this.value, page: this.page }).then(res => {
                this.loading = false
                this.list = this.list.concat((res.data || {}).data || [])
            })
        },
        onSearch () {
            this.page = 1
            this.list = []
            this.courseSearch()
        },
        onCancel () {
            // Toast('取消');
            this.$router.back()
        },
    }
};
</script>
